<template>
	<view class="content">
		<view class="navbar">
			<view class="nav-item" :class="{ current: filterIndex === 0 }" @click="tabClick(0)">全部</view>
			<view class="nav-item" v-for="item in categoryList" :key="item.id" :class="{ current: filterIndex === item.id }" @click="tabClick(item.id)">{{ item.name }}</view>
			<!-- <view class="nav-item" :class="{current: filterIndex === 2}" @click="tabClick(2)">
             <text>-</text>
             <view class="p-box">
              <text :class="{active: priceOrder === 1 && filterIndex === 2}" class="yticon icon-shang"></text>
              <text :class="{active: priceOrder === 2 && filterIndex === 2}" class="yticon icon-shang xia"></text>
             </view>
            </view>
            <text class="cate-item yticon icon-fenlei1" @click="toggleCateMask('show')"></text> -->
		</view>
		<view class="cu-card article" style="width: 100%;">
			<empty v-if="goodsList.length === 0" style="background: initial;top: 20%;"></empty>
			<view class="guess-section">
				<view class="grid col-2 grid-square">
					<view
						class='guess-item'
						v-for="(titem, index) in goodsList" :key="titem.id"
					>
						<view @click="navToDetailPage(titem)">
							<image :src="titem.img" mode="aspectFill"></image>
							<text class="title clamp">{{ titem.name }}</text>
							<text class="price">
								<span>{{ titem.integral }}</span>积分
							</text>
						</view>
						<view @click="isWeiXin(titem)" class="cu-tag border">加入购物车</view>
					</view>
				</view>
			</view>
			<!-- <view class="cu-item shadow" v-for="titem in goodsList" :key="titem.id">
				<view class="content">
					<image :src="titem.img" mode="aspectFill" @click="navToDetailPage(titem)"></image>
					<view class="desc">
						<view>
							<view class="title-content" @click="navToDetailPage(titem)">{{ titem.name }}</view>
						</view>
						<view v-if="titem.brandId !== '94408dd6c16a48dfb414ba999e2c76c2'">
							<view class="list" style="margin-top:5px;">规格：{{ titem.introduction }}</view>
							<view class="list">
								市场价：
								<span>¥ {{ titem.showPrice / 100 }}</span>
							</view>
							<view class="list">
								网络价：
								<span>¥ {{ titem.skuList[0].price / 100 }}</span>
							</view>
						</view>
						<view class="integral">
							<view class="price">{{ titem.integral }}积分</view>
							<view @click="isWeiXin(titem)" class="cu-tag border">加入购物车</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>

		<uni-tabbar class="uni-tabbar-bottom" style="">
			<div class="uni-tabbar" style="background-color: rgb(255, 255, 255);">

				<div class="uni-tabbar__item" @click="homeBtn">
					<!---->
					<div class="uni-tabbar__bd" style="height: 50px;">
						<div class="uni-tabbar__icon" style="width: 24px; height: 24px;">
							<img src="/sstshop/static/tab-home.png" />
							<!---->
						</div>
						<div class="uni-tabbar__label" style=" font-size: 10px; line-height: normal; margin-top: 3px;">
							首页
							<!---->
						</div>
					</div>
				</div>
				<div class="uni-tabbar__item" @click="cartBtn">
					<!---->
					<div class="uni-tabbar__bd" style="height: 50px;">
						<div class="uni-tabbar__icon" style="width: 24px; height: 24px;">
							<img src="/sstshop/static/tab-cart.png" />
							<!---->
						</div>
						<div class="uni-tabbar__label" style="color: font-size: 10px; line-height: normal; margin-top: 3px;">
							购物车
							<!---->
						</div>
					</div>
				</div>
				<div class="uni-tabbar__item" @click="userBtn">
					<!---->
					<div class="uni-tabbar__bd" style="height: 50px;">
						<div class="uni-tabbar__icon" style="width: 24px; height: 24px;">
							<img src="/sstshop/static/tab-my.png" />
							<!---->
						</div>
						<div class="uni-tabbar__label" style="font-size: 10px; line-height: normal; margin-top: 3px;">
							我的
							<!---->
						</div>
					</div>
				</div>
			</div>
			<div class="uni-placeholder" style="height: 50px;"></div>
		</uni-tabbar>
	</view>
</template>

<script>
import config from 'config';
import empty from '@/components/empty';
import { cartAdd, cartAddApp } from 'api/cart';
import { productInfoListJf, findChildrenListByParent, getOpenidMsg } from 'api/shop';
// import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		empty
		// uniLoadMore
	},
	data() {
		return {
			config: config,
			cateMaskState: 0, //分类面板展开状态
			headerPosition: 'fixed',
			headerTop: '0px',
			loadingType: 'more', //加载更多状态
			filterIndex: 0,
			cateId: 0, //已选三级分类id
			priceOrder: 0, //1 价格从低到高 2价格从高到低
			cateList: [],
			goodsList: [],
			categoryList: [],
			isWeiXinType: false,
			idCard: '',
			userInfo: {}
		};
	},

	onLoad(options) {
		// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
		let ua = window.navigator.userAgent.toLowerCase();
		// alert(JSON.stringify(ua))
		// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			//是公众号
			console.log('是公众号');
			this.getOpenidMsgAction();
		} else {
			//不是公众号
			console.log('不是公众号');
		}

		this.findChildrenListByParentAction(options.indexCategoryId);
		console.log(options, 'options');
		if (options.categoryId !== '' && options.categoryId !== '0') {
			this.filterIndex = options.categoryId;
			this.tabClick(options.categoryId);
		} else {
			this.filterIndex = options.categoryId;
			this.init();
		}
	},
	methods: {
		homeBtn(){
			uni.switchTab({
				url: '/pages/index/index'
			})
		},
		cartBtn(){
			uni.switchTab({
				url: '/pages/cart/cart'
			})
		},
		userBtn(){
			uni.switchTab({
				url: '/pages/user/user'
			})
		},
		getOpenidMsgAction(item) {
			getOpenidMsg().then(ret => {
				if (ret.data.errcode === 0) {
					let data = ret.data.data.result;
					if (data) {
						if (data.cardNo === null || data.cardNo === '' || data.cardNo === undefined) {
							this.handle();
						} else {
							this.userInfo = data;
							this.idCard = data.cardNo;
							console.log(data.cardNo, 'data.cardNo');
							// this.selectUserIntegralReciveRecordListAction(data.cardNo)
						}
					} else {
						console.log('没有此人信息');
						this.handle();
					}
				} else if (ret.data.errcode === 9999 || ret.data.errcode === 9991) {
					this.handle();
				} else {
					this.$api.msg(ret.data.errmsg);
					return false;
				}
			});
		},
		handle() {
			// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
			let ua = window.navigator.userAgent.toLowerCase();
			// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				//是微信浏览器
				window.location.href = this.$xeUtils.locat().origin + '/yq/#/handle-submit';
				// window.location.href = 'https://shengst.tripln.top/subsidy/#/city-card-handle'
			} else {
				window.location.href = 'https://shengst.tripln.top/subsidy/#/city-card-handle-app';
			}
		},
		isWeiXin(item) {
			// window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
			let ua = window.navigator.userAgent.toLowerCase();
			// alert(JSON.stringify(ua))
			// 通过正则表达式匹配ua中是否含有MicroMessenger字符串
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				//是公众号
				console.log('是公众号');
				this.isWeiXinType = true;
				this.add(item, '1', this.idCard);
			} else {
				//不是公众号
				console.log('不是公众号');
				this.isWeiXinType = false;
				this.add(item, '0');
			}
		},
		add(item, isWeiXinType, cardNo) {
			console.log(item, 'item');
			console.log(isWeiXinType, 'isWeiXinType');
			console.log(cardNo, 'cardNo');
			if (isWeiXinType === '1') {
				if (!cardNo) {
					this.getOpenidMsgAction();
					return false;
				}
				cartAdd({
					skuId: item.skuList[0].id,
					spuId: item.id,
					deliveryType:item.deliveryType,
					brandId: localStorage.getItem('brandId'),
					spuName: item.name,
					supplierId:item.supplierId,
					total: '1',
					amount: item.integral,
					idCard: cardNo,
					img: item.img
				}).then(ret => {
					if (ret.data.errcode === 0) {
						this.$api.msg('添加购物车成功');
					} else {
						this.$api.msg(ret.data.errmsg);
					}
				});
			} else {
				cartAddApp({
					skuId: item.skuList[0].id,
					spuId: item.id,
					deliveryType:item.deliveryType,
					brandId: localStorage.getItem('brandId'),
					spuName: item.name,
					supplierId:item.supplierId,
					total: '1',
					amount: item.integral,
					img: item.img
				}).then(ret => {
					if (ret.data.errcode === 0) {
						this.$api.msg('添加购物车成功');
					} else {
						this.$api.msg(ret.data.errmsg);
					}
				});
			}
		},
		tabClick(data) {
			this.filterIndex = data;
			if (data === 0) {
				this.init();
			} else {
				this.init(data);
			}
		},
		init(item) {
			let data = { isJf: 1, isShow: 1, brandId: localStorage.getItem('brandId') };
			if (item !== '') {
				data.categoryId = item;
			}
			productInfoListJf(data).then(ret => {
				this.goodsList = ret.data.data;
			});
		},
		findChildrenListByParentAction(indexCategoryId) {
			findChildrenListByParent({ parent: indexCategoryId }).then(ret => {
				this.categoryList = ret.data.data;
				console.log(this.categoryList, '99');
			});
		},
		//详情
		navToDetailPage(item) {
			//测试数据没有写id，用title代替
			let id = item.id;
			uni.navigateTo({
				url: `/pages/product/productJf?id=` + id
			});
		},
		stopPrevent() {}
	}
};
</script>

<style lang="scss">
.desc {
	flex: 1;
	position: relative;


	.list {
		font-size: 12px;
		color: #888;
		margin: 10px 0;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;

		> span {
			color: #fa436a;
		}
	}

	.integral {
		height: 25px;
		position: absolute;
		right: 0;
		bottom: 27px;
		text-align: center;
	}
}

.price {
	color: #fa436a;
	font-size: 14px;
	margin-bottom: 10px;
}

page,
.content {
	// background: #f8f8f8;
}
.content {
	padding-top: 100upx;
	display: flex;
}

.navbar {
	position: fixed;
	left: 0;
	top: var(--window-top);
	display: -webkit-box;
	width: 100%;
	height: 80upx;
	line-height: 80upx;
	background: #fff;
	box-shadow: 0 2upx 10upx rgba(0, 0, 0, 0.06);
	z-index: 10;
	overflow-x: auto; /*x轴超出后可滚动*/
	white-space: nowrap; /*实现子元素不换行*/
	overflow-y: hidden;
	.nav-item {
		width: 22%;
		text-align: center;
		// flex: 1;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		height: 100%;
		font-size: 30upx;
		color: $font-color-dark;
		position: relative;
		&.current {
			color: $base-color;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 120upx;
				height: 0;
				border-bottom: 4upx solid $base-color;
			}
		}
	}
	.p-box {
		display: flex;
		flex-direction: column;
		.yticon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30upx;
			height: 14upx;
			line-height: 1;
			margin-left: 4upx;
			font-size: 26upx;
			color: #888;
			&.active {
				color: $base-color;
			}
		}
		.xia {
			transform: scaleY(-1);
		}
	}
	.cate-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		width: 80upx;
		position: relative;
		font-size: 44upx;
		&:after {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			border-left: 1px solid #ddd;
			width: 0;
			height: 36upx;
		}
	}
}

.guess-section {
	padding-bottom: 60px;

	.guess-item {
		background: white;
		padding: 20upx;
		height: 230px !important;
		position: relative;

		uni-image {
			height: 150px;
			margin-bottom: 5upx;
			color: #616161;
		}
	}
	
	.title {
		font-size: 13px;
		margin-bottom: 15px;
	}
	
	.price {
		font-size: 20upx;
		color: #ff4246;

		span {
			font-size: 28upx !important;
			margin-right: 6upx;
			font-weight: 600;
		}
	}
}
.article{
	padding: 0 10px;
}
.grid.grid-square .cu-tag{
	position: absolute;
	bottom: 10px;
	right: 10px;
	top: initial;
	background: #ff4246;
	color:#ffffff;
	border-radius: 15px;
	padding: 6px 8px;
}
</style>
